<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-18 11:37:16
 * @LastEditors: oooh
 * @LastEditTime: 2024-05-31 10:52:14
 * @FilePath: \Civil_Servant_Performance_PC\src\views\workbench\general-user\index.vue
-->
<template>
  <div class="app-container workbench-container">
    <div class="header">
      <div>
        <span class="header-title">[{{ dept.deptName }}] {{ nickName }}</span>
        <span class="pl-10 header-title-normal">工作台</span>
      </div>
      <div class="header-dropdown">
        <el-dropdown trigger="click" @command="handleCommandYear">
          <span class="header-dropdown-title">
            {{ optionsFormat(queryParams.year, yearOptions) }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in yearOptions" :key="item.value" :command="item.value" :label="item.label" :value="item.value">
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <el-dropdown trigger="click" class="ml-10" @command="handleCommandQuarter">
          <span class="header-dropdown-title">
            {{ optionsFormat(queryParams.quarter, quarterOptions) }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="item in quarterOptions" :key="item.value" :command="item.value" :label="item.label" :value="item.value">{{
              item.label
            }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <right-toolbar :search="false" @queryTable="getList"></right-toolbar>
    </div>
    <el-row class="main">
      <el-row>
        <el-col :span="6">
          <div class="step-title" :style="{ 'background-color': stepTitleColor[3], 'z-index': 10 }">
            <img src="@/assets/images/arrow-first.svg" alt="" />
            <span>计划</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="step-title" :style="{ 'background-color': stepTitleColor[1], 'z-index': 8 }">
            <img src="@/assets/images/arrow-first.svg" alt="" />
            <span>执行</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="step-title" :style="{ 'background-color': stepTitleColor[2], 'z-index': 6 }">
            <img src="@/assets/images/arrow-first.svg" alt="" />
            <span>评价</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="step-title" :style="{ 'background-color': stepTitleColor[3], 'z-index': 4 }">
            <img src="@/assets/images/arrow-first.svg" alt="" />
            <span>反馈</span>
          </div>
        </el-col>
      </el-row>
      <el-row v-loading="loading">
        <el-col :span="6" class="full-height">
          <div class="step">
            <p class="step-empty align-center">暂无数据</p>
          </div>
        </el-col>
        <el-col :span="6" class="full-height">
          <div class="step">
            <ul>
              <li v-for="item in execution" :key="item.label">
                <p class="step-item-title"><i :class="item.icon || 'el-icon-caret-right'" class="color-primary"></i>{{ item.label }}</p>
                <div class="pl-15" v-if="item.list.length">
                  <el-button
                    type="text"
                    v-for="subItem in item.list"
                    :key="subItem.label"
                    :class="{ 'color-success font-bold': subItem.flag }"
                    @click="handleToPage(item, subItem.flag)"
                  >
                    <span>{{ subItem.label }}</span>
                    <i class="el-icon-check font-bold" v-if="subItem.flag"></i>
                  </el-button>
                </div>
                <p class="step-empty" v-else>暂无数据</p>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6" class="full-height">
          <div class="step">
            <ul>
              <li v-for="(item, index) in evaluation" :key="index">
                <p class="step-item-title"><i :class="item.icon || 'el-icon-caret-right'" class="color-primary"></i>{{ item.label }}</p>
                <div class="pl-15" v-if="item.list.length">
                  <el-button
                    type="text"
                    v-for="subItem in item.list"
                    :key="subItem.label"
                    :class="{ 'color-success font-bold': subItem.flag }"
                    @click="handleToPage(item, subItem.flag)"
                  >
                    <span>{{ subItem.label }}</span>
                    <i class="el-icon-check font-bold" v-if="subItem.flag"></i>
                  </el-button>
                </div>
                <p class="step-empty" v-else>暂无数据</p>
              </li>
            </ul>
          </div>
        </el-col>
        <el-col :span="6" class="full-height">
          <div class="step step-border-none">
            <ul>
              <li v-for="(item, index) in feedback" :key="index">
                <p class="step-item-title"><i :class="item.icon || 'el-icon-caret-right'" class="color-primary"></i>{{ item.label }}</p>
                <div class="pl-15" v-if="item.list.length">
                  <el-button
                    type="text"
                    v-for="subItem in item.list"
                    :key="subItem.label"
                    :class="{ 'color-success font-bold': subItem.flag }"
                    @click="handleToPage(item, subItem.flag)"
                  >
                    <span>{{ subItem.label }}</span>
                    <i class="el-icon-check font-bold" v-if="subItem.flag"></i>
                  </el-button>
                </div>
                <p class="step-empty" v-else>暂无数据</p>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { listPersonal as listWork } from '@/api/workbench'
import { getDicts } from '@/api/system/dict/data.js'
import { quarterFormat } from '@/utils/quarter.js'
export default {
  name: 'general-user',
  props: {},
  dicts: ['biz_work_year_list'],
  components: {},
  data() {
    return {
      // 计划
      plan: [
        // {
        //   label: '工作任务分解',
        //   basePath: '/work/individual-work-plan',
        //   path: '/performance-inventory',
        //   query: {
        //     type: 'civil',
        //     tabs: 'work-list'
        //   },
        //   list: []
        // }
      ],
      // 执行
      execution: [
        {
          label: '工作纪实',
          basePath: '/work/individual-work-completion',
          path: '/performance-inventory',
          query: {
            type: 'civil',
            tabs: 'work-list'
          },
          list: []
        },
        {
          label: '填报平时考核登记表',
          basePath: '/work/daily-performance',
          path: '/performance-inventory',
          query: {
            type: 'civil',
            tabs: 'daily-performance'
          },
          list: []
        },
        { label: '个人争先创优申报', basePath: '/work/excellent-rating', list: [] },
        { label: '个人年度荣誉奖励申报', basePath: '/work/annual-honor', list: [] }
      ],
      // 评价
      evaluation: [
        {
          label: '民主测评',
          basePath: '/performance-inventory',
          query: {
            type: 'civil',
            tabs: 'democratic-evaluation'
          },
          list: []
        },
        {
          label: '负面清单',
          basePath: '/performance-inventory',
          query: {
            type: 'civil',
            tabs: 'civil-negative-list'
          },
          list: []
        }
      ],
      // 反馈
      feedback: [
        {
          label: '干部季度绩效管理情况汇总表',
          basePath: '/performance-inventory',
          query: {
            type: 'civil',
            tabs: 'cadre-performance'
          },
          list: []
        }
      ],
      loading: false,
      // stepTitleColor: ['#a3ccf6', '#a0cfff', '#8cc5ff', '#79bbff'],
      stepTitleColor: ['#fff', '#fff', '#fff', '#fff'],
      queryParams: {
        deptId: '',
        year: '',
        quarter: ''
      },
      yearOptions: [],
      quarterOptions: []
    }
  },
  computed: {
    ...mapGetters(['nickName', 'dept'])
  },
  watch: {},
  created() {
    // this.queryParams.deptId = this.dept.deptId
    ;(async () => {
      await this.getDicts()
      this.handleCommandYear(this.queryParams.year)
    })()
  },
  methods: {
    // 跳转功能页面
    handleToPage(raw, flag) {
      this.$router.push({ path: flag ? raw.path : raw.basePath, query: raw.query || '' })
    },
    // 年度选择
    handleCommandYear(year) {
      this.queryParams.year = year
      // 获取当前季度、季度列表（往年默认第一季度）
      let { quarter, quarterList } = quarterFormat(year)
      this.quarterOptions = quarterList
      this.handleCommandQuarter(quarter)
    },
    // 季度选择
    handleCommandQuarter(quarter) {
      this.queryParams.quarter = quarter
      let list = [{ label: quarter + '季度', flag: 0 }]
      this.$set(this.evaluation[0], 'list', list)
      this.$set(this.evaluation[1], 'list', list)
      this.$set(this.feedback[0], 'list', list)
      this.getList()
    },
    optionsFormat(val, list) {
      let find = list.find(item => item.value === val)
      return find ? find.label : '-'
    },

    async getDicts() {
      await getDicts('biz_work_year_list').then(res => {
        this.yearOptions = res.data.map(item => {
          return { value: item.dictValue, label: item.dictLabel }
        })
        this.queryParams.year = this.yearOptions[0].value
      })
    },
    getList() {
      this.loading = true
      listWork(this.queryParams).then(res => {
        this.loading = false
        let { workSubmitStatus, yearHonorApply, excellentApply, workRegistration } = res.data
        let planList = [],
          executionList = []
        try {
          planList = workSubmitStatus.map(item => {
            return { label: item.label, flag: item.submitFlag }
          })
        } catch (error) {}
        try {
          executionList = workSubmitStatus.map(item => {
            return { label: item.label, flag: item.reportFlag }
          })
        } catch (error) {}

        // this.$set(this.plan[0], 'list', planList)
        this.$set(this.execution[0], 'list', executionList || [])
        this.$set(this.execution[1], 'list', [workRegistration])
        this.$set(this.execution[2], 'list', [excellentApply])
        this.$set(this.execution[3], 'list', [yearHonorApply])
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('~@/assets/styles/workbench.scss');
// /deep/ .el-select .el-input.is-focus .el-input__inner {
//   border: none;
// }
</style>
